<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 1、生成普通标签：标签选择器 div -->
  <div></div>
  <p></p>

  <!-- 2、生成div标签+类名：类选择器 .red -->
  <div class="red"></div>
  <div class="red"></div>
  <div class="father"></div>
  <div class="son"></div>

  <!-- 3、生成div标签+id属性：id选择器 #one -->
  <div id="one"></div>
  <div id="one"></div>

  <!-- 4、生成指定标签+类名+id属性：交集选择器 p.red#one -->
  <p class="red" id="one"></p>
  <p class="red" id="one"></p>

  <!-- 5、生成儿子：子代选择器 ul > li -->
  <ul>
    <li></li>
  </ul>

  <ul>
    <li></li>
  </ul>

  <div class="father">
    <div class="son"></div>
  </div>

  <!-- 6、生成内部文本：大括号 ul>li{我是li的内容} -->
  <div>我是内容</div>
  <ul>
    <li>我也是内容</li>
  </ul>

  <!-- 7、同时创建多个： *个数  ul>li*3 -->
  <ul>
    <li></li>
  </ul>

  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>

  <!-- 8、综合使用： ul>li{我是内容}*10 -->
  <ul>
    <li>我是内容</li>
    <li>我是内容</li>
    <li>我是内容</li>
    <li>我是内容</li>
    <li>我是内容</li>
    <li>我是内容</li>
    <li>我是内容</li>
    <li>我是内容</li>
    <li>我是内容</li>
    <li>我是内容</li>
  </ul>

  
</body>
</html>